<template>
  <div>
    <!-- 树形控件 -->
    <el-tree
      :data="data"
      :props="defaultProps"
      node-key="id"
      :default-expand-all="true"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <div>
            <el-image
              v-if="data.picUrl && data.level == 2"
              :src="data.picUrl"
            ></el-image>
            <span>{{ node.label }}</span>
            <span style="margin-left: 8px">
              <el-tag v-if="data.level == 0" type="danger">一级</el-tag>
              <el-tag v-if="data.level == 1" type="success">二级</el-tag>
              <el-tag v-if="data.level == 2" type="success">三级</el-tag>
            </span>
          </div>
          <span class="concatenation">
            <el-button
              size="small"
              round
              @click.stop="add(1, data)"
              type="primary"
              v-if="node.level != 4"
              >添加</el-button
            >
            <el-button
              size="small"
              round
              @click="editor(data, node)"
              type="warning"
              v-if="node.level != 1"
              >编辑</el-button
            >
            <el-button
              size="small"
              round
              @click="remove(data, node)"
              type="danger"
              v-if="!data.childrenList"
              >删除</el-button
            >
          </span>
        </span>
      </template>
    </el-tree>
    <!-- 添加对话框 -->
    <el-dialog
      v-model="adds"
      title="添加"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="类目" prop="title">
          <el-input v-model.trim="ruleForm.title" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类目图片" prop="picUrl">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.1.188:8080/upload/admin"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="token"
          >
            <img
              v-if="ruleForm.picUrl"
              :src="ruleForm.picUrl"
              class="avatar"
              style="width: 80px; height: 80px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="adds = false">取消</el-button>
          <el-button type="primary" @click="definiteness">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editors"
      title="编辑"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForms"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="类目" prop="title">
          <el-input v-model.trim="ruleForms.title" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类目图片" prop="picUrl" v-model="ruleForms.picUrl">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.1.188:8080/upload/admin"
            :show-file-list="false"
            :on-success="rss"
            :before-upload="beforeAvatarUpload"
            :headers="token"
          >
            <img
              v-if="ruleForms.picUrl"
              :src="ruleForms.picUrl"
              class="avatar"
              style="width: 80px; height: 80px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editors = false">取消</el-button>
          <el-button type="primary" @click="editorsuer">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import cookin from "js-cookie";
  import http from "@/http";
  import { ElMessage } from "element-plus";
  export default {
    data() {
      return {
        adds: false, //添加对话框
        editors: false,
        data: [], //要展示的数据
        defaultProps: {
          children: "childrenList",
          label: "title",
        },
        rules:{
          title: [
            {
              required: true,
              message: "标题不能为空！",
              trigger: "blur",
            },
          ],
        },
        //创建
        ruleForm: {
          title: "",
          parentId: "",
          iconUrl: "",
          picUrl: "",
        },
        ruleForms: {
          id: "",
          title: "",
          parentId: "",
          iconUrl: "",
          picUrl: "",
        },
      };
    },
    created() {
      this.Category();
      this.token = {
        AdminToken: cookin.get("token"),
      };
    },
    methods: {
      //渲染数据
      Category() {
        let data = {
          _gp: "admin.category",
          _mt: "categoryTree",
        };
        http.post(data).then((res) => {
          console.log(res);
          this.data = [
            {
              id: 0,
              title: "全部类目",
              childrenList: res.data,
            },
          ];
        });
      },
      //获取图片
      handleAvatarSuccess(res) {
        console.log(res);
        if (200 == res.errno) {
          this.ruleForm.picUrl = res.url;
        }
      },
      //编辑替换图片
       rss(res) {
        console.log(res);
        if (200 == res.errno) {
          this.ruleForms.picUrl = res.url;
        }
      },
      //添加
      add(node, data) {
        // console.log(node);
        this.ruleForm.parentId = data.id;
        this.adds = true;
      },
      //添加确认
      definiteness() {
        // console.log(data);
        let datas = {
          _gp: "admin.category",
          _mt: "create",
          ...this.ruleForm,
        };
        http.post(datas).then((res) => {
          console.log(res);
          if (200 == res.errno) {
            ElMessage.success("添加成功！");
            this.ruleForm = this.$options.data().ruleForm;
            this.Category();
            this.adds = false;
          }
        });
      },
      //编辑
      editor(data) {
        this.editors = true;
        this.ruleForms.parentId = data.id;
        Object.assign(this.ruleForms,data);
        // console.log(this.ruleForms);
      },
      //修改确定
      editorsuer() {
        let editoras = {
          _gp: "admin.category",
          _mt: "update",
          ...this.ruleForms,
        };
        http.post(editoras).then((res) => {
          console.log(res);
          if(200==res.errno){
            ElMessage.success("修改成功！")
            this.Category()
            this.editors = false
          }
        });
      },
      //删除
      remove(data,index) {
        ElMessageBox.confirm("是否删除此数据", {
          confirmButtonText: "OK",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let deletes = {
              _gp: "admin.category",
              _mt: "delete",
              id: data.id,
            };
            http.post(deletes).then((res) => {
              console.log(res);
              if (200 == res.errno) {
                this.Category()
              }
            });
            ElMessage({
              type: "success",
              message: "删除成功",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消成功",
            });
          });
      },
    },
  };
</script>
<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang="less" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

    .el-image {
      height: 20px;
      width: 20px;
      vertical-align: middle;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px dashed #ccc;
  }

</style>
